<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/9/2 0002
  Time: 上午 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>配置菜单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="demo-content">
    <style type="text/css">
        .btns {
            margin-top: 20px;
        }

        .button {
            margin-bottom: 0px;
        }

        .bui-select-list {
            overflow: auto;
        }
    </style>
    <label class="control-label" style="float:left;margin-top:50px;margin-left:30px"><b>角色信息：</b></label>

    <div style="width:300px;float:left;margin-left:0px;margin-top:100px">
        <div class="row">
            <div class="control-group span8">
                <label class="control-label"><b>ID：</b></label>

                <div class="controls">
                    ${role._id}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label"><b>角色：</b></label>

                <div class="controls">
                    ${role.name}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label"><b>角色描述：</b></label>

                <div class="controls">
                    ${role.description}
                </div>
            </div>
        </div>
    </div>
    <div id="list1" class="span5" style="margin-top:100px">
        <span><b>可绑定的资源：</b></span>
    </div>
    <div class="btns centered span2">
        <button class="button button-small" type="button" id="J_BtnRight" style="margin-top:140px">>></button>
        <button class="button button-small" type="button" id="J_BtnLeft" style="margin-top:140px"><<</button>
    </div>

    <div id="list2" class="span5" style="margin-top:100px">
        <span><b>已拥有的资源：</b></span>
    </div>
    <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="/static/bui/js/bui.js"></script>
    <script type="text/javascript" src="/static/bui/js/config.js"></script>
    <script type="text/javascript" src="/static/js/sea.js"></script>
    <script type="text/javascript" src="/static/js/cxdate.js"></script>
    <script type="text/javascript">
        BUI.use(['bui/list', 'bui/overlay'], function (List, overlay) {
            var items1 = [
                        <c:forEach items="${noResources}" var="nr">
                        {text: '${nr.name}', _id: '${nr._id}'},
                        </c:forEach>
                    ],
                    items2 = [
                        <c:forEach items="${resources}" var="r">
                        {text: '${r.name}', _id: '${r._id}'},
                        </c:forEach>
                    ],
                    list1 = new List.Listbox({
                        elCls: 'bui-select-list',//默认是'bui-simple-list'
                        render: '#list1',
                        items: items1,
                        height: 350
                    }),
                    list2 = new List.Listbox({
                        elCls: 'bui-select-list',//默认是'bui-simple-list'
                        render: '#list2',
                        items: items2,
                        height: 350
                    });
            list1.render();
            list2.render();
            $('#J_BtnRight').on('click', function () {
                var selections1 = list1.getSelection();
                list1.removeItems(selections1);
                var ids = [];
                BUI.each(selections1, function (item) {
                    ids.push(item._id)
                });
                if (ids.length) {
                    $.ajax({
                        type: 'POST',
                        url: '/role/bindResource?roleId=${role._id}&_ids=' + ids,
                        success: function (msg) {
                            if (msg == 'success') {
                                msg = "绑定资源成功！";
                            }
                            list2.addItems(selections1);
                            BUI.Message.Show({
                                msg: msg,
                                icon: 'success',
                                buttons: [],
                                autoHide: true,
                                autoHideDelay: 1000
                            });
                        }
                    })
                }
            });
            $('#J_BtnLeft').on('click', function () {
                var selections2 = list2.getSelection();
                list2.removeItems(selections2);
                var ids = [];
                BUI.each(selections2, function (item) {
                    ids.push(item._id)
                });
                if (ids.length) {
                    $.ajax({
                        type: 'POST',
                        url: '/role/removeResource?roleId=${role._id}&_ids=' + ids,
                        success: function (msg) {
                            if (msg == 'success') {
                                msg = "解除资源成功！";
                            }
                            list1.addItems(selections2);
                            BUI.Message.Show({
                                msg: msg,
                                icon: 'success',
                                buttons: [],
                                autoHide: true,
                                autoHideDelay: 1000
                            });
                        }
                    })
                }
            });
        });
    </script>
</div>
</body>
</html>
